<template>
    <div class="stat-items w-100 h-100 d-grid-col">
        <div class="stat-item shadow br-1 cursor-pointer" v-for="item in items" :key="item.name">
            <div>{{ item.value }}</div>
            <div>{{ item.name }}</div>
        </div>
    </div>
</template>
<script setup>
import { watchEffect } from "vue";
import funcUtils from "@/utils/func.js";
import * as _ from "lodash";
import https from "@/utils/https";

const { config } = defineProps({
    config: Object,
});

const items = ref([]);
watchEffect(() => {
    let configItems = config.items;
    if (!configItems) {
        return;
    }

    if (_.isArray(configItems)) {
        items.value = configItems;
        return;
    }

    funcUtils.callFunc(configItems, {}, { https }).then((resp) => {
        console.log(resp);
        items.value = resp;
    });
});
</script>

<style lang="scss" scoped>
.stat-item {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    color: white;
    font-family: "Segoe UI", sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    &:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    > div:first-child {
        font-size: 40px;
    }

    > div:last-child {
        font-size: 20px;
        line-height: 30px;
    }
}

.stat-item:nth-child(1) {
    background: linear-gradient(135deg, #4a90e2, #61c4ea);
}
.stat-item:nth-child(2) {
    background: linear-gradient(135deg, #50e3c2, #41b883);
}
.stat-item:nth-child(3) {
    background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
}
.stat-item:nth-child(4) {
    background: linear-gradient(135deg, #ffd166, #ffaa33);
}
.stat-item:nth-child(5) {
    background: linear-gradient(135deg, #9d4edd, #7b2cbf);
}
.stat-item:nth-child(6) {
    background: linear-gradient(135deg, #ff6b6b, #ffd166);
}
</style>
